<template>
	<view class="special-content" v-if="pageInfo" :style="'background:' + pageInfo.bgcolor">
		<view class="top-img"><image class="img" :src="pageInfo.image" mode="widthFix"></image></view>
		
		<view class="coupon-list">
			<view class="coupon-item" v-for="(item, index) in pageInfo.couponArr" :key="item.id" @click="getCoupon(index)">
				<view class="name-box">
					<image class="img" :src="item.img" mode="aspectFill"></image>
					<text class="name">{{item.name}}</text>
				</view>
				<view class="discount-box">
					<view class="discont">
						<view class="red">{{currency}}<text class="num">{{item.discount}}</text></view>
						<view class="btn-box">
							<view class="btn receive" v-if="item.can">立即领取</view>
							<view class="btn use" v-if="!item.can && item.is_had">去使用</view>
							<view class="btn end" v-if="!item.can && !item.is_had">已抢完</view>
						</view>
					</view>
					<view class="gray"><lang keywords="满X1可用" :X1="item.order_money" unit="yuanSymbol" :chineseTxt="'满'+ (currency + item.order_money) +'可用'"></lang></view>
				</view>
			</view>
		</view>
		
		<view class="tab-title-wrapper" v-if="pageInfo.product_list.length > 1">
			<view :class="'tab-title ' + (isTitleFixed ? 'fixed' : '')">
				<view class="item" v-for="(item, index) in pageInfo.product_list" :key="item.name" :style="'color:' + (activeIndex == index ? tabTitleColor : '')" @click="clickTitle(index)">
					<text class="iconfont icon-dingwei1" v-if="activeIndex == index"></text>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<view class="shop-list">
			<view class="type-content" v-for="(typeList, index) in pageInfo.product_list" :key="index">
				<view class="title"><text class="txt">{{typeList.name}}</text></view>
				<shopItem class="item" v-for="shop in typeList.store_list.store_list" :key="shop.store_id" :shop="shop" :showRange="false"></shopItem>
				<view class="loading-txt">
					<text class="txt" @click="getMoreShop(index)" v-if="typeList.store_list.has_more && !typeList.store_list.is_loading">点击加载更多</text>
					<text class="txt" v-if="typeList.store_list.has_more && typeList.store_list.is_loading">正在加载...</text>
					<text class="txt" v-if="!typeList.store_list.has_more">没有更多了哦~</text>
				</view>
			</view>
		</view>
		
		<userinfo :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo"></userinfo>
	</view>
</template>

<script>
import shopItem from '../../../appComponent/platcommon/shopItem.vue'
import common from '../../../utils/common.js'
var app = getApp()
var _this
export default {
	components: {shopItem},
	data () {
		return {
			specialId: '',
			pageInfo: '',
			activeIndex: 0,
			tabTitleColor: '#F68029',
			tabTitleTop: 0,
			isTitleFixed: false,
			typeItemTop: [],
			scrollTop: 0,
			currency: '¥',
			user_options: {} 
		}
	},
	onLoad (options) {
		_this = this
		_this.specialId = options.id
		
		// #ifdef H5
			console.log('准备跳小程序页', _this.id);
			common.webToMiniapp(_this.route, options, 'redirect')
		// #endif
		
		common.getConfig(function(data){
			_this.currency = data.config.Currency_symbol
			
			getPageInfo()
		})
	},
	onPageScroll (e) {
		let typeItemTop = _this.typeItemTop
		_this.scrollTop = e.scrollTop
		if (typeItemTop.length > 0) {
			if(e.scrollTop >= _this.tabTitleTop && !_this.isTitleFixed) {
				_this.isTitleFixed = true
			} else if (e.scrollTop < _this.tabTitleTop && _this.isTitleFixed) {
				_this.isTitleFixed = false
			}
			if ( _this.activeIndex < typeItemTop.length - 1 && e.scrollTop >= typeItemTop[_this.activeIndex + 1].top - 40) {
				_this.activeIndex = _this.activeIndex + 1
			}
			if ( _this.activeIndex > 0 && e.scrollTop < typeItemTop[_this.activeIndex].top - 40) {
				_this.activeIndex = _this.activeIndex - 1
			}
		}
		
	},
	methods: {
		getUserInfo (e) {
			console.log('获取用户信息 getUserInfo', e)
		},
		clickTitle (index) {
			if (index != _this.activeIndex) {
				uni.pageScrollTo({
					scrollTop: _this.typeItemTop[index].top,
					duration: 300
				})
				setTimeout(() => {
					_this.activeIndex = index
				}, 310)
			}
		},
		// 立即领取优惠券
		getCoupon (index) {
			let coupon = _this.pageInfo.couponArr[index]
			if (coupon.can) {
				if (!app.globalData.is_login) {
					_this.user_options = {
						toLogin: true
					}
					return
				}
				common.post('Systemcoupon&a=had_pull', {coupon_id: coupon.id}, (data) => {
					console.log('领取优惠券成功', data)
					uni.showToast({
						title: common.changeTxt('已成功领取一张优惠券!'),
						icon: 'none'
					})
					coupon.can = false
					coupon.is_had = true
					_this.pageInfo.couponArr.splice(index, 1, coupon)
				}, _this, (err) => {
					uni.showToast({
						title: common.changeTxt('领取失败!'),
						icon: 'none'
					})
					console.log('领取优惠券错误', err)
				})
			} else if (!coupon.can && coupon.is_had) {
				if (common.checkIsFooterPage("/pages/shop_index/index")) {
					uni.switchTab({
						url: "/pages/shop_index/index"
					});
				} else {
					uni.navigateTo({
						url: '/pages/nofooter/shop/shop_index',
					})
				}
			}
		},
		// 点击加载更多
		getMoreShop (index) {
			_this.pageInfo.product_list[index].store_list.is_loading = true
			_this.$forceUpdate()
			let param = {
				ids: _this.pageInfo.product_list[index].product_ids,
				page: _this.pageInfo.product_list[index].store_list.page ? _this.pageInfo.product_list[index].store_list.page : 2,
				noTip: true
			}
			common.post('Special&a=getShopList', param, (data) => {
				_this.pageInfo.product_list[index].store_list.is_loading = false
				_this.pageInfo.product_list[index].store_list.store_list = _this.pageInfo.product_list[index].store_list.store_list.concat(data.store_list)
				if (data.has_more) {
					_this.pageInfo.product_list[index].store_list.page = param.page + 1
				} else {
					_this.pageInfo.product_list[index].store_list.has_more = false
				}
				console.log('店铺列表', data)
				_this.$forceUpdate()
				getRect()
			})
		}
	}
	
}

const getPageInfo = () => {
	common.post('Special&a=getSpecialDetail', {id: _this.specialId}, (data) => {
		console.log('外卖专题页数据', data)
		if (data) {
			_this.pageInfo = data
			
			uni.setNavigationBarTitle({
				title: _this.pageInfo.name
			})
			if (_this.pageInfo.bgcolor != '#f9f9f9') {
				_this.tabTitleColor = _this.pageInfo.bgcolor
			}
			if (_this.pageInfo.product_list.length > 1) {
				getRect()
			}
		}
	})
}

const getRect = () => {
	setTimeout(function(){
		uni.createSelectorQuery().selectAll('.tab-title-wrapper, .type-content').boundingClientRect(function(rect){
			console.log('分类标题的位置信息', rect, _this.scrollTop)
			if (rect && rect.length > 0) {
				_this.tabTitleTop = rect[0].top
				_this.typeItemTop = rect.slice(1, rect.length)
				if (_this.scrollTop > 0) {
					_this.tabTitleTop = rect[0].top + _this.scrollTop
					_this.typeItemTop.map(item => {
						item.top = item.top + _this.scrollTop
						return item
					})
				}
			}
		}).exec()
	}, 300)
}
</script>

<style lang="stylus">
.special-content
	.top-img
		margin-bottom 10px
		font-size 0
		.img
			width 100%
	.coupon-list
		padding-right 10px
		display flex
		flex-wrap wrap
		.coupon-item
			width -webkit-calc(50% - 10px)
			width calc(50% - 10px)
			margin-left 10px
			margin-bottom 10px
			background #fff
			border-radius 5px
			overflow hidden
			box-shadow 0 0 5px rgba(0, 0, 0, .2)
			.name-box
				padding 10px
				font-size 0
				display flex
				align-items center
				background linear-gradient(to right, #F87652 , #E83D63);
				position relative
				overflow hidden
				&::after
					content ''
					position: absolute;
					z-index: 5;
					bottom: -5px;
					left: 0;
					transform-origin: center left;
					transform: rotate(0deg);
					width: 100%;
					height: 8px;
					background-image: radial-gradient(circle, #fff, #fff 3px, transparent 0px, transparent 2px, transparent 22px, transparent);
					background-size: 8px 8px;
					background-repeat: repeat-x;
				.img
					width 30px
					height 30px
					background #f4f4f4
					margin-right 5px
					border-radius 4px
					flex-shrink 0
				.name
					font-size 14px
					color #fff
					white-space nowrap
					overflow hidden
			.discount-box
				padding 20rpx 10px
				overflow hidden
				word-break break-all
				font-size 12px
				.num
					font-size 18px
				.red
					color #ED1955
				.gray
					color #999
				.discont
					display flex
					justify-content space-between
					align-items center
					margin-bottom 5px
				.btn-box
					flex-shrink 0
					.btn
						padding 10rpx 15px
						font-size 12px
						border-radius 15px
						color #fff
						&.receive
							background #ED1955
							padding 10rpx 10px
						&.use
							border 1px solid #ED1955
							color #ED1955
						&.end
							background #bbb
							
	.tab-title-wrapper
		height 40px
		margin-top 15px
		.tab-title
			display flex
			align-items center
			font-size 14px
			background #fff
			padding 10px 0
			overflow hidden
			margin-bottom 10px
			&.fixed
				position fixed
				top 0
				left 0
				right 0
				z-index 99
			.item
				flex 1
				text-align center
	.shop-list
		padding-bottom 10px
		.type-content
			font-size 14px
			&:last-child
				.loading-txt
					margin-bottom 0
			.title
				color #bbb
				text-align center
				display flex
				justify-content center
				align-items center
				margin 0 10px
				padding 20px 0 10px
				.txt
					padding 0 10px
				&::before, &::after
					content ''
					height 1px
					background #eee
					flex-grow 1
			.item
				margin 0 10px 10px
				background #fff
				border-radius 5px
				padding: 15px 10px 10px 10px;
			.loading-txt
				background #fff
				text-align center
				margin 0 10px 10px
				border-radius 5px
				color #333
				.txt
					display inline-block
					width 100%
					padding 10px
					box-sizing border-box
</style>
